<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Hello MUI</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<!--标准mui.css-->
		<style>
		.show {
		  width: 20px;
		  height: 20px;
		  background: #f583a1;
		  border-radius: 50%;
		  background-color: #eed968;
		  /* margin: 7px; */
		  display: flex;
		  justify-content: center;
		  align-items: center;
		}
		@keyframes scale {
		  0% {
		    transform: scale(1);
		  }
		  50%,
		    75% {
		    transform: scale(2.5);
		  }
		  78%, 100% {
		    opacity: 0;
		  }
		}
		.show:before {
		  content: '';
		  width: 20px;
		  height: 20px;
		  border-radius: 50%;
		  background-color: #eed968;
		  opacity: 0.7;
		  animation: scale 2s infinite cubic-bezier(0, 0, 0.49, 1.02);
		  animation-delay: 200ms;
		  transition: 0.5s all ease;
		  transform: scale(1);
		}
		</style>
		<style type="text/css">
			/* #id_1{border: 1px solid blue;width: 30px;height: 30px;border-radius: 15px;background-color: red;float: left;} */
			#id_1{-border: 1px solid blue;width: 100%;height: 300px;border-radius: 40px;background-color: blueviolet;float: left;padding: 20px;}
			#id_1_1{-border: 1px solid blue;width: 100%;height: 100%;border-radius: 25px;background-color: white;float: left;}
		</style>
	</head>

	<body>
		<div class="mui-content">
			<!-- 
			钱胆(C)包流转环节轨迹
			款包（R）流转环节轨迹 
			 -->
			<div style="width: 50%;height: 400px;position: absolute;top: 50px;left:20%;-border: 1px solid red;">
				<div id="id_1" style="position: relative;">
					<!-- 空胆入柜1 -->
					<div cb_num="1" id="id_2_1" class="id_2_1" style="z-index: 1000; position: absolute;top: 8px;left: 10px; float: left;  width: 20px;height: 20px;border-radius: 15px;background-color: lightgray;">
					</div>
					<!-- 在途运营3 -->
					<div cb_num="5" id="id_2_4" class="id_2_4" style="z-index: 1000;position: absolute;top: 0px; left:45%; float: left;  width: 20px;height: 20px;border-radius: 15px;background-color: lightgray;">
					</div>
					<!-- 实胆运输6 -->
					<div cb_num="6" id="id_2_5" class="id_2_5" style="z-index: 1000;position: absolute;top: 8px;right: 10px; float: right;  width: 20px;height: 20px;border-radius: 15px;background-color: lightgray;">
					</div>
					<!-- 实胆清点7 -->
					<div cb_num="7" id="id_2_6" class="id_2_6" style="z-index: 1000;position: absolute;bottom: 10px; right: 10px; float: right;  width: 20px;height: 20px;border-radius: 15px;background-color: lightgray;">
					</div>
					<!-- 空胆运输8 -->
					<div cb_num="8" id="id_2_7" class="id_2_7" style="z-index: 1000;position: absolute;bottom: 10px; left: 10px;float: left;  width: 20px;height: 20px;border-radius: 15px;background-color: lightgray;">
					</div>
					<!-- 箭头 -->
					<div cb_num="9" id="id_3_1" class="id_3_1" style="z-index: 1000;position: absolute;top: 0px;left: 20%; float: left;  width: 20px;height: 20px;border-radius: 5px;-background-color: greenyellow;color: springgreen">
					➔
					</div>
					<div cb_num="10" id="id_3_2" class="id_3_2" style="z-index: 1000;position: absolute;top: 0px;left: 70%; float: left;  width: 20px;height: 20px;border-radius: 5px;-background-color: greenyellow;color: springgreen">
					➔
					</div>
					<div cb_num="11" id="id_3_3" class="id_3_3" style="transform: rotate(90deg);z-index: 1000;position: absolute;right: 0px;top: 44%; float: left;  width: 20px;height: 20px;border-radius: 5px;-background-color: greenyellow;color: springgreen">
					➜
					</div>
					<div cb_num="12" id="id_3_4" class="id_3_4" style="transform: rotate(180deg);z-index: 1000;position: absolute;bottom: 0px;left: 74%; float: left;  width: 20px;height: 20px;border-radius: 5px;-background-color: greenyellow;color: springgreen">
					➔
					</div>
					<div cb_num="13" id="id_3_5" class="id_3_5" style="transform: rotate(180deg);z-index: 1000;position: absolute;bottom: 0px;left: 44%; float: left;  width: 20px;height: 20px;border-radius: 5px;-background-color: greenyellow;color: springgreen">
					➔
					</div>
					<div cb_num="14" id="id_3_6" class="id_3_6" style="transform: rotate(180deg);z-index: 1000;position: absolute;bottom: 0px;left: 14%; float: left;  width: 20px;height: 20px;border-radius: 5px;-background-color: greenyellow;color: springgreen">
					➔
					</div>
					<div cb_num="15" id="id_3_7" class="id_3_7" style="transform: rotate(-90deg);z-index: 1000;position: absolute;left: 0px;top: 44%; float: left;  width: 20px;height: 20px;border-radius: 5px;-background-color: greenyellow;color: springgreen">
					➔
					</div>
					<!-- 描述 -->
					<style>
						#id_1_1_1::-webkit-scrollbar {
						  display: none;
						}
					</style>
					<div id="id_1_1" style="position: relative;background-color: white;-padding: 20px;overflow: hidden;">
						 <div id="id_1_1_1" style="position: absolute;left: 24%;top: 20%;height: 60%;width: 50%; -border: 1px solid red;overflow-y: scroll;overflow-x: hidden;">
						</div>
						<div style="position: absolute;top:20px;">胆</div>
						<div style="position: absolute;top:40px;">空</div>
						<div style="position: absolute;top:0px;left: 15px;">入柜</div>
						<div style="position: absolute;top:0px;left: 40%;">实胆入柜</div>
						<div style="position: absolute;top:0px;right: 15px;">实胆</div>
						<div style="position: absolute;top:20px;right: 0px;">运</div>
						<div style="position: absolute;top:40px;right: 0px;">输</div>
						<div style="position: absolute;bottom:40px;right: 0px;">实</div>
						<div style="position: absolute;bottom:20px;right: 0px;">胆</div>
						<div style="position: absolute;bottom:0px;right: 15px;">清点</div>
						<!-- <div style="position: absolute;bottom:0px;left: 55%;">实胆运输</div>
						<div style="position: absolute;bottom:0px;left: 25%;">实胆清点</div> -->
						<div style="position: absolute;bottom:40px;left: 0px;">空</div>
						<div style="position: absolute;bottom:20px;left: 0px;">胆</div>
						<div style="position: absolute;bottom:0px;left: 15px;">运输</div>
					</div>
				</div>
				<div style="position: absolute;top: 400px;left: 100px; height: 80px;">
					<div id="" style="width: 20px;height: 20px;background-color: greenyellow;border-radius: 10px;float: left;"></div>
					<div style="float: left;">已完成&nbsp;&nbsp;</div>
					<div id="" style="width: 20px;height: 20px;background-color: lightgray;border-radius: 10px;float: left;"></div>
					<div style="float: left;">未进行&nbsp;&nbsp;</div>
					<!-- <div id="" style="position: relative;width: 50px;height: 20px;background-color: blueviolet;border-radius: 4px;float: left;">
						<div id="" style="position: absolute;top: 5px;left: 5px; width: 40px;height: 10px;background-color: white;border-radius: 4px;float: left;">
						</div>
					</div>
					<div style="float: left;">正常&nbsp;&nbsp;</div>
					<div id="" style="position: relative;width: 50px;height: 20px;background-color: blue;border-radius: 4px;float: left;">
						<div id="" style="position: absolute;top: 5px;left: 5px; width: 40px;height: 10px;background-color: white;border-radius: 4px;float: left;">
						</div>
					</div>
					<div style="float: left;">异常&nbsp;&nbsp;</div> -->
				</div>
			</div>
		</div>
	</body>
	<script src="js/mui.min.js"></script>
	<script src="js/jquery-2.1.0.js"></script>
	<script>
		//var urls = '/apis/report/report';
		//var urls = 'http://cbms.yintn.com:8800/report';
		//var urls = 'http://192.168.3.20:8801/cashboxCircle';
		var urls = 'http://cbms.yintn.com:8801/cashboxCircle';
		//初次自动加载
		$(function(){
			var url = location.search; //获取url中"?"符后的字串
			var strs = '';
			var cashboxId = '';
			var circleTimes = '';
			if (url.indexOf("?") != -1) { //判断是否有参数
				var str = url.substr(1); //从第一个字符开始 因为第0个是?号 获取所有除问号的所有符串
				strs = str.split("&"); //用等号进行分隔 （因为知道只有一个参数 所以直接用等号进分隔 如果有多个参数 要用&号分隔 再用等号进行分隔）
				console.log(strs[0]+"/"+strs[1]); //直接弹出第一个参数 （如果有多个参数 还要进行循环的）
				cashboxId = strs[0].substr(strs[0].indexOf("=")+1,strs[0].length);//id=C0000027
				circleTimes = strs[1].substr(strs[1].indexOf("=")+1,strs[1].length);;//step=1
			}
			initQuery(cashboxId,circleTimes)
		})
		
		function initQuery(cashboxId,circleTimes){
			$.ajax({
				type: 'POST',
				url: urls+'/initQueryCircle',
				dataType: 'json',
				/* beforeSend: function (request) {
					request.setRequestHeader("Authorization", "Bearer " + getCookie('token'));
				}, */
				data: {
					"circleTimes": circleTimes,
					"cashboxId": cashboxId
				},
				success: function(data){
					console.log("==>"+JSON.stringify(data))
					var crList = data.data;
					//步骤1:判断是否有异常
					var exception = "";
					//alert("==>"+crList.length)
					for(var i=0;i<crList.length;i++){
						//alert("==>"+typeof(crList[0].cbrExceptionFlag))
						if(crList[i].cbrExceptionFlag=="1"){
							exception = "1";
						}
						if(crList.length!="5"){
							exception = "1";
						}
					}
					if(exception=="1"){
						//alert("有异常")
						//切换流转图颜色
						var obj = document.getElementById("id_1");
						obj.style.backgroundColor= "blue";
						//1-空胆入柜 2-空胆领取 3-在途运营 4-实胆摘胆 5-实胆入柜 6-实胆运输 7-实胆清点 8-空胆运输
						//var kr="1",zy="3",sz="4",sr="5",sy="6",sq="7",ky="8";
						queryCircle(crList);
					}else{
						//alert("正常");
						//切换流转图颜色
						var obj = document.getElementById("id_1");
						obj.style.backgroundColor= "blueviolet";
						//1-空胆入柜 2-空胆领取 3-在途运营 4-实胆摘胆 5-实胆入柜 6-实胆运输 7-实胆清点 8-空胆运输
						//var kr="1",zy="3",sz="4",sr="5",sy="6",sq="7",ky="8";
						queryCircle(crList);
					}
					
					$("#id_2_1").click(function() {
						$("#id_1_1_1").empty();
						var cb_num = $(this).attr("cb_num");
						for(var i=0;i<crList.length;i++){
							if(crList[i].cbrStep.toString()==cb_num){
								var div = document.getElementById('id_2_1');
								div.className = 'show';
								div.style.backgroundColor= "red";
								//alert("文本内容是：" + cb_head_text + "\n" + "编号：" + cb_num); //  \n换行
								var html='<span>操作人：'+crList[i].userName+'</span><br />'
												+'<span>日期：'+crList[i].cbrUserTime+'</span><br />';
												/* if(crList[i].cbrBusNumber ==null){
													html+='<span style="">车辆：无</span><br /><hr style="background-color:#EEE9E9;height:1px;border:0px;"/>';
												}else{
													html+='<span style="">车辆：'+crList[i].cbrBusNumber+'</span><br /><hr style="background-color:#EEE9E9;height:1px;border:0px;"/>';
												} */
								$("#id_1_1_1").append(html);
							}else{
								var div4 = document.getElementById('id_2_4');
								div4.className = '';
								var div5 = document.getElementById('id_2_5');
								div5.className = '';
								var div6 = document.getElementById('id_2_6');
								div6.className = '';
								var div7 = document.getElementById('id_2_7');
								div7.className = '';
								if(crList[i].cbrStep.toString() =='5'){
									var div = document.getElementById('id_2_4');
									div.style.backgroundColor= "greenyellow";
								}
								if(crList[i].cbrStep.toString() =='6'){
									var div = document.getElementById('id_2_5');
									div.style.backgroundColor= "greenyellow";
								}
								if(crList[i].cbrStep.toString() =='7'){
									var div = document.getElementById('id_2_6');
									div.style.backgroundColor= "greenyellow";
								}
								if(crList[i].cbrStep.toString() =='8'){
									var div = document.getElementById('id_2_7');
									div.style.backgroundColor= "greenyellow";
								}
							}
						}
					});
					$("#id_2_4").click(function() {
						$("#id_1_1_1").empty();
						var cb_num = $(this).attr("cb_num");
						for(var i=0;i<crList.length;i++){
							if(crList[i].cbrStep.toString()==cb_num){
								var div = document.getElementById('id_2_4');
								div.className = 'show';
								div.style.backgroundColor= "red";
								//alert("文本内容是：" + cb_head_text + "\n" + "编号：" + cb_num); //  \n换行
								var html='<span>操作人：'+crList[i].userName+'</span><br />'
												+'<span>日期：'+crList[i].cbrUserTime+'</span><br />';
												/* if(crList[i].cbrBusNumber ==null){
													html+='<span style="">车辆：无</span><br /><hr style="background-color:#EEE9E9;height:1px;border:0px;"/>';
												}else{
													html+='<span style="">车辆：'+crList[i].cbrBusNumber+'</span><br /><hr style="background-color:#EEE9E9;height:1px;border:0px;"/>';
												} */
												
								$("#id_1_1_1").append(html);
							}else{
								var div1 = document.getElementById('id_2_1');
								div1.className = '';
								var div5 = document.getElementById('id_2_5');
								div5.className = '';
								var div6 = document.getElementById('id_2_6');
								div6.className = '';
								var div7 = document.getElementById('id_2_7');
								div7.className = '';
								if(crList[i].cbrStep.toString() =='1'){
									var div = document.getElementById('id_2_1');
									div.style.backgroundColor= "greenyellow";
								}
								if(crList[i].cbrStep.toString() =='6'){
									var div = document.getElementById('id_2_5');
									div.style.backgroundColor= "greenyellow";
								}
								if(crList[i].cbrStep.toString() =='7'){
									var div = document.getElementById('id_2_6');
									div.style.backgroundColor= "greenyellow";
								}
								if(crList[i].cbrStep.toString() =='8'){
									var div = document.getElementById('id_2_7');
									div.style.backgroundColor= "greenyellow";
								}
							}
						}
					});
					$("#id_2_5").click(function() {
						$("#id_1_1_1").empty();
						var cb_num = $(this).attr("cb_num");
						for(var i=0;i<crList.length;i++){
							if(crList[i].cbrStep.toString()==cb_num){
								var div = document.getElementById('id_2_5');
								div.className = 'show';
								div.style.backgroundColor= "red";
								//alert("文本内容是：" + cb_head_text + "\n" + "编号：" + cb_num); //  \n换行
								var html='<span>操作人：'+crList[i].userName+'</span><br />'
												+'<span>日期：'+crList[i].cbrUserTime+'</span><br />';
												/* if(crList[i].cbrBusNumber ==null){
													html+='<span style="">车辆：无</span><br /><hr style="background-color:#EEE9E9;height:1px;border:0px;"/>';
												}else{
													html+='<span style="">车辆：'+crList[i].cbrBusNumber+'</span><br /><hr style="background-color:#EEE9E9;height:1px;border:0px;"/>';
												} */
								$("#id_1_1_1").append(html);
							}else{
								var div1 = document.getElementById('id_2_1');
								div1.className = '';
								var div4 = document.getElementById('id_2_4');
								div4.className = '';
								var div6 = document.getElementById('id_2_6');
								div6.className = '';
								var div7 = document.getElementById('id_2_7');
								div7.className = '';
								if(crList[i].cbrStep.toString() =='1'){
									var div = document.getElementById('id_2_1');
									div.style.backgroundColor= "greenyellow";
								}
								if(crList[i].cbrStep.toString() =='5'){
									var div = document.getElementById('id_2_4');
									div.style.backgroundColor= "greenyellow";
								}
								if(crList[i].cbrStep.toString() =='7'){
									var div = document.getElementById('id_2_6');
									div.style.backgroundColor= "greenyellow";
								}
								if(crList[i].cbrStep.toString() =='8'){
									var div = document.getElementById('id_2_7');
									div.style.backgroundColor= "greenyellow";
								}
							}
						}
					});
					$("#id_2_6").click(function() {
						$("#id_1_1_1").empty();
						var cb_num = $(this).attr("cb_num");
						for(var i=0;i<crList.length;i++){
							if(crList[i].cbrStep.toString()==cb_num){
								var div = document.getElementById('id_2_6');
								div.className = 'show';
								div.style.backgroundColor= "red";
								//alert("文本内容是：" + cb_head_text + "\n" + "编号：" + cb_num); //  \n换行
								var html='<span>操作人：'+crList[i].userName+'</span><br />'
												+'<span>日期：'+crList[i].cbrUserTime+'</span><br />';
												/* if(crList[i].cbrBusNumber ==null){
													html+='<span style="">车辆：无</span><br /><hr style="background-color:#EEE9E9;height:1px;border:0px;"/>';
												}else{
													html+='<span style="">车辆：'+crList[i].cbrBusNumber+'</span><br /><hr style="background-color:#EEE9E9;height:1px;border:0px;"/>';
												} */
								$("#id_1_1_1").append(html);
							}else{
								var div1 = document.getElementById('id_2_1');
								div1.className = '';
								var div4 = document.getElementById('id_2_4');
								div4.className = '';
								var div5 = document.getElementById('id_2_5');
								div5.className = '';
								var div7 = document.getElementById('id_2_7');
								div7.className = '';
								if(crList[i].cbrStep.toString() =='1'){
									var div = document.getElementById('id_2_1');
									div.style.backgroundColor= "greenyellow";
								}
								if(crList[i].cbrStep.toString() =='5'){
									var div = document.getElementById('id_2_4');
									div.style.backgroundColor= "greenyellow";
								}
								if(crList[i].cbrStep.toString() =='6'){
									var div = document.getElementById('id_2_5');
									div.style.backgroundColor= "greenyellow";
								}
								if(crList[i].cbrStep.toString() =='8'){
									var div = document.getElementById('id_2_7');
									div.style.backgroundColor= "greenyellow";
								}
							}
						}
					});
					$("#id_2_7").click(function() {
						$("#id_1_1_1").empty();
						var cb_num = $(this).attr("cb_num");
						for(var i=0;i<crList.length;i++){
							if(crList[i].cbrStep.toString()==cb_num){
								var div = document.getElementById('id_2_7');
								div.className = 'show';
								div.style.backgroundColor= "red";
								//alert("文本内容是：" + cb_head_text + "\n" + "编号：" + cb_num); //  \n换行
								var html='<span>操作人：'+crList[i].userName+'</span><br />'
												+'<span>日期：'+crList[i].cbrUserTime+'</span><br />';
												/* if(crList[i].cbrBusNumber ==null){
													html+='<span style="">车辆：无</span><br /><hr style="background-color:#EEE9E9;height:1px;border:0px;"/>';
												}else{
													html+='<span style="">车辆：'+crList[i].cbrBusNumber+'</span><br /><hr style="background-color:#EEE9E9;height:1px;border:0px;"/>';
												} */
								$("#id_1_1_1").append(html);
							}else{
								var div1 = document.getElementById('id_2_1');
								div1.className = '';
								var div4 = document.getElementById('id_2_4');
								div4.className = '';
								var div5 = document.getElementById('id_2_5');
								div5.className = '';
								var div6 = document.getElementById('id_2_6');
								div6.className = '';
								if(crList[i].cbrStep.toString() =='1'){
									var div = document.getElementById('id_2_1');
									div.style.backgroundColor= "greenyellow";
								}
								if(crList[i].cbrStep.toString() =='5'){
									var div = document.getElementById('id_2_4');
									div.style.backgroundColor= "greenyellow";
								}
								if(crList[i].cbrStep.toString() =='6'){
									var div = document.getElementById('id_2_5');
									div.style.backgroundColor= "greenyellow";
								}
								if(crList[i].cbrStep.toString() =='7'){
									var div = document.getElementById('id_2_6');
									div.style.backgroundColor= "greenyellow";
								}
							}
						}
					});
				},
				error: function(data){
					console.log(data.msg);
				}
			});
		}
		function queryCircle(crList){
			//alert(JSON.stringify(crList))
			for(var i=0;i<crList.length;i++){
				if(crList[i].cbrStep.toString() =='1'){
					var div = document.getElementById('id_2_1');
					div.style.backgroundColor= "greenyellow";
				}
				if(crList[i].cbrStep.toString() =='5'){
					var div = document.getElementById('id_2_4');
					div.style.backgroundColor= "greenyellow";
				}
				if(crList[i].cbrStep.toString() =='6'){
					var div = document.getElementById('id_2_5');
					div.style.backgroundColor= "greenyellow";
				}
				if(crList[i].cbrStep.toString() =='7'){
					var div = document.getElementById('id_2_6');
					div.style.backgroundColor= "greenyellow";
				}
				if(crList[i].cbrStep.toString() =='8'){
					var div = document.getElementById('id_2_7');
					div.style.backgroundColor= "greenyellow";
				}
				//alert(typeof(crList[i].cbrStep.toString())+"/"+ stepnumStr)
				/* if(stepnumStr=="1" && crList[i].cbrStep.toString() =='1'){
					var div = document.getElementById('id_2_1');
					div.className = 'show';
					div.style.backgroundColor= "red";
					var html='<span>操作人：'+crList[i].userName+'</span><br />'
									+'<span>日期：'+crList[i].cbrUserTime+'</span><br />';
									
					$("#id_1_1_1").append(html);
				}
				if(stepnumStr=="5" && crList[i].cbrStep.toString()=="5"){
					var div = document.getElementById('id_2_4');
					 div.className = 'show';
					 div.style.backgroundColor= "red";
					var html='<span>操作人：'+crList[i].userName+'</span><br />'
									+'<span>日期：'+crList[i].cbrUserTime+'</span><br />';
									if(crList[i].cbrBusNumber ==null){
										html+='<span style="">车辆：无</span><br /><hr style="background-color:#EEE9E9;height:1px;border:0px;"/>';
									}else{
										html+='<span style="">车辆：'+crList[i].cbrBusNumber+'</span><br /><hr style="background-color:#EEE9E9;height:1px;border:0px;"/>';
									}
					$("#id_1_1_1").append(html);
				}
				if(stepnumStr=="6" && crList[i].cbrStep.toString()=="6"){
					var div = document.getElementById('id_2_5');
					 div.className = 'show';
					 div.style.backgroundColor= "red";
					var html='<span>操作人：'+crList[i].userName+'</span><br />'
									+'<span>日期：'+crList[i].cbrUserTime+'</span><br />';
									
					$("#id_1_1_1").append(html);
				}
				if(stepnumStr=="7" && crList[i].cbrStep.toString()=="7"){
					var div = document.getElementById('id_2_6');
					 div.className = 'show';
					 div.style.backgroundColor= "red";
					var html='<span>操作人：'+crList[i].userName+'</span><br />'
									+'<span>日期：'+crList[i].cbrUserTime+'</span><br />';
									
					$("#id_1_1_1").append(html);
				}
				if(stepnumStr=="8" && crList[i].cbrStep.toString()=="8"){
					var div = document.getElementById('id_2_7');
					 div.className = 'show';
					 div.style.backgroundColor= "red";
					var html='<span>操作人：'+crList[i].userName+'</span><br />'
									+'<span>日期：'+crList[i].cbrUserTime+'</span><br />';
									
					$("#id_1_1_1").append(html);
				} */
			}
			
		}
		
		
	</script>
</html>
